


<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.shopName" placeholder="店铺" style="width: 170px;"></el-input>
        <el-date-picker v-model="search.dateStart"  type="date"  placeholder="选择开始日期" :picker-options="startDatePicker" style="width: 170px;margin-left:5px;"></el-date-picker>
        <el-date-picker v-model="search.dateEnd"  type="date"  placeholder="选择结束日期" :picker-options="endDatePicker" style="width: 170px;margin-left:5px;"></el-date-picker>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="店铺">
        <template slot-scope="scope">
          <span>{{ scope.row.shopName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="入账金额">
        <template slot-scope="scope">
          <span :class="'moneychange '+(scope.row.changeMoney>0?'green':'red')">{{ scope.row.changeMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="变动前">
        <template slot-scope="scope">
          <span>{{ scope.row.yuEpre }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="变动后">
        <template slot-scope="scope">
          <span>{{ scope.row.yuEbak }}</span>
        </template>
      </el-table-column>
     <el-table-column min-width="20%" align="center" label="订单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNum }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%"  align="center" label="类型">
        <template slot-scope="scope">
            <span>{{scope.row.settleType | parseSettleType}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <!-- <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <router-link :to="'/ordermanage/refunddetail/'+scope.row.orderNum">
            <el-button type="primary" size="small">
              详情
            </el-button>
          </router-link>
          
        </template>
      </el-table-column> -->
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as financeApi from '@/api/finance'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination


export default {
  name: 'IncomeInfo',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        dateStart:'',
        dateEnd:'',
        shopName:'',
      },
      search:{
        shopName:'',
        //dateStart:parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 31),'{y}-{m}-{d}'),
        //dateEnd:parseTime(new Date(),'{y}-{m}-{d}'),
        dateStart:'',
        dateEnd:''
      },
      startDatePicker:this.startDateHandler(),
      endDatePicker:this.endDatehandler()
    }
  },
  created(){
      var that=this;
      that.searchClick();
  },
  mounted(){

  },
  filters:{
    parseSettleType(val){
       return ['','收益','提现'][val];
    }
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      
      financeApi.getShopIncomeList(that.listQuery).then(res=>{
         if(res.data && res.data.items){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
         }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.dateStart=that.search.dateStart;
      that.listQuery.dateEnd=that.search.dateEnd;
      that.listQuery.shopName=that.search.shopName.trim();
      that.getList();
    },
    startDateHandler(){
        let self = this
        return {
          disabledDate(time){
           if(self.search.dateEnd){
              return new Date(self.search.dateEnd).getTime() < time.getTime() || time.getTime() > Date.now()
            }else{
              return time.getTime() > Date.now()//结束时间不选时，开始时间最大值小于等于当天
            }
          }
        }
      },
      //提出结束时间必须大于提出开始时间
    endDatehandler(){
        let self = this
        return {
          disabledDate(time){
            if(self.search.dateStart){
              return new Date(self.search.dateStart).getTime() > time.getTime() || time.getTime() > Date.now()
            }else{
              return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
    }
  }
}
</script>
<style scoped>
.moneychange{ position: relative;}
    .moneychange.green{ color:#42b983}
    .moneychange.red{ color:#f00}
    .moneychange.green::before{
        position:absolute;
        top:-3px;left:-10px; content:'+'; color:#42b983; display: inline-block; width:10px;height: 10px;
    }
    .moneychange.red::before{
        position:absolute;
        top:-3px;left:-10px; content:'-'; color:#f00; display: inline-block; width:10px;height: 10px;
    }
</style>
